<template>
    <div class="clockIn">
         <!-- 头部 -->
        <!-- <div class="header">
            <div class="header_box">
                <span class="header_reture"> <img src="../../../assets/img/public/reture_black.png" alt=""> </span>
                <div>打卡挑战</div>
                <span class="header_rule">
                    <span @click="getrules">查看规则</span>
                </span>
            </div>
            
        </div> -->
        <head-view></head-view>
        <!--  -->
        <div class="content">
           <div class="center_box">
               <h5 class="centent_tit">今日9点前打卡可按比列瓜分（金币）</h5>
               <p class="centent_num">1111111</p>
               <p class="centent_text">当前报名人数11111人</p>
               <div class="centent_btn" @click="getsign">
                   <span>参与打卡挑战</span>
                   <!-- <span>明天5-9点回来打卡领取奖励</span> -->
               </div>
               <!-- <div class="centent_btn">
                   <span>明天5-9点回来打卡领取奖励</span>
               </div> -->
               
               <div class="centent_card">
                   <p class="centent_card_tit">3步玩转早起打卡</p>
                   <div class="centent_card_rule">
                       <span>
                           <img src="../../../assets/img/ClockIn/gold.png" alt="">
                           <p>当天报名</p>
                       </span>
                       <span>
                           <img src="../../../assets/img/ClockIn/naoz.png" alt="">
                           <p>次日5-9点打卡</p>
                       </span>
                       <span>
                           <img src="../../../assets/img/ClockIn/jiangl.png" alt="">
                           <p>次日9点领取奖励</p>
                       </span>
                   </div>
               </div>
           </div>
        </div>

        <!--  -->
        <div class="MyIncome" @click="toMyIncome">
            我的收益
        </div>
        <!-- 规则弹出框 -->
        <div class="Clock_rules" v-if="rule_on">
            <div class="rules_box">
                <div>
                   <h5>规则说明</h5>
                    <p>asdsadsdsada00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd00000000000000sdsadasdddadaadsdassadsa789</p>
                </div>
                
                <div class="close"  @click="close">我知道了</div>
                
            </div>
        </div>
        <!-- 报名弹出层 -->
        <div class="sign" v-if="sign_up">
            <div class="sign_box">
                <p> <img src="../../../assets/img/ClockIn/gold_punchcard.png" alt=""></p>
                <div class="sign_text">
                    <h5>80金币报名</h5>
                    <p>明天9点前打卡可瓜分奖励</p>
                </div>
                <p class="sign_bin">立即报名</p>
            </div>
            <div class="sign_prompt"><img src="../../../assets/img/public/video_icon.png" alt=""> 视频最多可获得三倍收益哦</div>
        </div>
    </div>
</template>

<script>

    export default {
        data(){
            return{
                rule_on: false,
                sign_up: false,
            }
        },
        created(){
        
        },

        methods: {
            toMyIncome(){
                this.$router.push({name:"MyIncome"})
            },
            getrules(){
                this.rule_on = !this.rule_on
            },
            close(){
                this.rule_on = !this.rule_on
            },
            getsign(){
                this.sign_up = !this.sign_up
            },
        }
    }
</script>

<style lang="scss" scoped>
@import "../../../assets/css/activity/ClockIn/ClockIn.scss"
</style>